<template>
  <div ref="main"></div>
</template>

<script>
import E from 'wangeditor'
export default {
  name: 'editor',
  data () {
    return {
      content: '',
      editor: null,
      info_: null
    }
  },
  watch: {
    isClear (val) {
      if (!val) {
        this.editor.txt.clear()
        // this.info_=null
      }
    },
    message (val) {
      console.log()
      // this.editor.txt.html(val)
    }
  },
  model: {
    prop: 'message',
    event: 'change'
  },
  props: {
    message: {
      type: String,
      default: ''
    },
    // 业务中会有添加操作和编辑操作，添加操作时，我们需清除上一操作留下的缓存
    isClear: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    initE () {
      this.editor = new E(this.$refs.main)
      // this.editor.customConfig.onchange = function (html) {
      //   // html 即变化之后的内容
      //   console.log('html-----', html)
      // }
      // 配置alt选项
      this.editor.config.showLinkImgAlt = false
      // 配置超链接
      this.editor.config.showLinkImgHref = false
      this.editor.create()
      this.editor.txt.html(this.message)
      this.editor.config.onchange = (newHtml) => {
        console.log(this.editor.txt.html())
        this.$emit('change', this.editor.txt.html())
        // this.info_ = this.editor.txt.text()
      }
      // 读取 html
      // console.log(this.editor.txt.html())
      // 读取 text
      // console.log(this.editor.txt.text())
    },
    change () {
      this.editor.txt.html(this.message)
    }
  },
  mounted () {
    this.initE()
  }
}
</script>

<style scoped>

</style>
